<template>
	<div class="app">
		<h2>求和为{{ sum }}</h2>
		<h2>求和为{{ sum2 }}</h2>
		<h2>当前汽车为{{ car }}</h2>
		<h2>当前汽车为{{ car2 }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeSum2">sum2+1</button>
		<button @click="changeBrand">修改车的品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeEngine">修改发动机</button>
		<button @click="changeBrand2">修改车的品牌2</button>
		<button @click="changeColor2">修改颜色2</button>
		<button @click="changeEngine2">修改发动机2</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,readonly,shallowReadonly} from 'vue'

	let sum = ref(0)
	let sum2 = readonly(sum)   //只读属性,但1和sum有关联关系
	let car = reactive({
		brand:'benchi',
		options:{
			color:'red',
			engine:'V8'
		}
	})
	// shallowReadonly只约束第一层为可读
	let car2 = shallowReadonly(car)

	function changeSum(){
		sum.value += 1
	}
	function changeSum2(){
		// sum2.value += 1
	}
	function changeBrand(){
		car.brand = '大众'
	}
	function changeColor(){
		car.options.color = 'pink'
	}
	function changeEngine(){
		car.options.engine = 'V7'
	}
	function changeBrand2(){
		// car2.brand = '大众'
	}
	function changeColor2(){
		car2.options.color = 'pink'
	}
	function changeEngine2(){
		car2.options.engine = 'V7'
	}


</script>

<style scoped>
	.app{
		margin: 10px auto;
		padding: 10px;
		background-color: skyblue;
		border-radius: 10px;
		box-shadow: 0  0 10px;
	}
	button{
		height: 30px;
		margin: 5px;
	}
</style>